<!--
 * User: CHT
 * Date: 2020/5/27
 * Time: 9:52
-->
<template>
  <div class="super-flow-base-demo">
    <super-flow
      ref="superFlow"
      :node-list="nodeList"
      :link-list="linkList"
      :origin="origin"
      :link-desc="linkDesc"
      :draggable="false"
      :linkAddable="false">
      <template v-slot:node="{meta}">
        <div :class="`flow-node flow-node-${meta.prop}`" >
          <header class="ellipsis" @click="typeClick(meta.name,meta.type,meta.data)" :style="{'cursor':meta.type?'pointer':'auto'}" >
            {{meta.name}}
          </header>
        </div>
      </template>
    </super-flow>

    <el-dialog
      :title="title"
      :modal="false"
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      width="50%">

      <json-viewer v-if="type=='json'"
                   style="max-height: 400px;overflow-y: auto"
        :value="selectData"
        :expand-depth=3
        copyable
        boxed
        sort></json-viewer>

      <el-table
        v-if="type=='table'"
        :data="selectData"
        style="width: 96%;"
        max-height="600px"
        :stripe="true">
        <el-table-column
          v-for="(item,index) in header"
          :key="index"
          :prop="item"
          :show-overflow-tooltip="true"
          :label="item">
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>
  </div>
</template>

<script>

import axios from 'axios'

export default {
  props:["nodeList","linkList","prj"],
  data() {
    return {
      linkSetting: {
        desc: ''
      },
      nodeSetting: {
        name: '',
        desc: ''
      },

      origin: [0, 0],
      dialogVisible:false,
      type:null,
      def:null,
      selectData:null,
      mode:"table",   // json
      title:"",
      header:[],
    }
  },
  created() {

  },
  methods: {
    linkDesc(link) {
      return link.meta ? link.meta.desc : ''
    },
    typeClick(title,type,data){
      this.title = title;
      this.type=type;
      this.selectData=data;
      this.dialogVisible = true;

      this.header=[];
      for (let key in this.selectData[0]){
        this.header.push(key)
      }
      return

      this.type=type;
      this.selectData=null;
      let prjCode = "laoying";
      let p1 =    axios.get(`/api/prj/def?code=${this.prj}&objCode=${type}`);
      let p2 =    axios.get(`/api/prj/data?code=${this.prj}&objCode=${type}`);
      Promise.all([p1,p2])
      .then(
        res=>{
          console.log(res);
          this.def = res[0].data.def;

          this.type=`${res[0].data.name}(${res[0].data.code})`
          this.selectData = res[1].data;
          this.dialogVisible = true;

          console.log(this.def,this.selectData);
        }
      )

    }
  }
}
</script>

<style >
@import "../assets/flow.css";
.jv-container.jv-light{

}
</style>
